import minderUtil from '../util/util';

export default class Induce{
     constructor(node,text,type){
     	this.node=node;
     	this.induceText=text;
     	this.type=type;
     	this.visible=true;
     	this.selected=false;
     	node._induce=this;
     	this.position={
     		x:0,
     		y:0
     	}
     // var theme=config.theme.getUse();
    //  if(theme){
      //  var stroke=theme.data.lineColor;
       // var fill=theme.data.backgroud;
       // var textFill=theme.data.color;
     // }else{
         var stroke='ccc';
         var fill='transparent';
         var textFill='#666';
      //}

     	this.g=new zrender.Group();
     	this.bezierCurve1=new zrender.BezierCurve({
			style:{
				stroke:stroke,
                lineWidth:1
			},
			z:9
	    });
	    this.bezierCurve2=new zrender.BezierCurve({
			style:{
				stroke:stroke,
            lineWidth:1
			},
			z:9
	    });

	    this.rect=new zrender.Rect({
	        	position:[12,0],
	        	style:{
	        		fill:fill,
	        		stroke:stroke,
	        		text:this.induceText,
	        		textFill:textFill,
	        		textPosition:'inside',
              lineWidth:1,
              fontSize:12,
              transformText:true
	        	},
	        	shape:{
	        		    r:[1],
	                x:0,
	                y:0
	        	},
	        	z:9
	    });
	    this.text=new zrender.Text({
	    	style:{
	    		text:text
	    	}
	    })

	   this.g.add(this.bezierCurve1);
	   this.g.add(this.bezierCurve2);
	   this.g.add(this.rect);
	   this.g.attachData={
	   	  name:'induce',
      	induce:this
	   }
       this.ajustType();
  	   this.create();
  	   this.initEvent();
     }

     create(){
     	var me=this;
     	var textBox= this.text.getBoundingRect();
     	if(this.type=='right'){
            this.rect.attr({
                    position:[14,0],
                    shape:{
                        width:textBox.width+16,
                        height:textBox.height+8
                    }
            });
            me.setBezierCurve();
            
     	}else if(this.type=='left'){
            this.rect.attr({
                 position:[10,0],
                 shape:{
                     width:textBox.width+16,
                     height:textBox.height+8
                 }
            });
             me.setBezierCurve();
 
     	}else if(this.type=='bottom'){
           this.rect.attr({
                 position:[0,0],
                 shape:{
                     width:textBox.width+16,
                     height:textBox.height+8
                 }
          });
          me.setBezierCurve();
      }else if(this.type=='top'){
           this.rect.attr({
                 position:[0,0],
                 shape:{
                     width:textBox.width+16,
                     height:textBox.height+8
                 }
          });
          me.setBezierCurve();
      }
     }

     setBezierCurve(){
     	var box=minderUtil.getNodeBox(this.node);
     	if(this.type=='right'){
     		this.setPosition(box.x1,box.y0);
     		var from = [2,0];
     		var center=[10,box.height/2];
     		var to=[2,box.height];
     		this.bezierCurve1.attr({
     			shape:{
     				x1:from[0],
	     			y1:from[1],
	     			x2:center[0],
	     			y2:center[1],
	     			cpx1:from[0]+10,
	     			cpy1:from[1]+10,
	     			cpx2:center[0]-10,
	     			cpy2:center[1]-10
     			}
     		});

     		this.bezierCurve2.attr({
     			shape:{
     				x1:to[0],
	     			y1:to[1],
	     			x2:center[0],
	     			y2:center[1],
	     			cpx1:to[0]+10,
	     			cpy1:to[1]-10,
	     			cpx2:center[0]-10,
	     			cpy2:center[1]+10
     			}
     		});
     		var textBox= this.text.getBoundingRect();

     		this.rect.attr({
     			shape:{
     				y:(box.height-textBox.height-10)/2
     			}
     		});

     	}else if(this.type=='left'){
     		var textBox= this.rect.getBoundingRect();
        var from = [textBox.width+20,0];
     		var center = [textBox.width+12,box.height/2];
     		var to = [textBox.width+20,box.height];
     		
     		this.bezierCurve1.attr({
     			shape:{
     				x1:from[0],
	     			y1:from[1],
	     			x2:center[0],
	     			y2:center[1],
	     			cpx1:from[0]-10,
	     			cpy1:from[1]+10,
	     			cpx2:center[0]+10,
	     			cpy2:center[1]-10
     			}
     			
     		});
     		this.bezierCurve2.attr({
     			shape:{	
                    x1:to[0],
                    y1:to[1],
                    x2:center[0],
                    y2:center[1],
                    cpx1:to[0]-10,
                    cpy1:to[1]-10,
                    cpx2:center[0]+10,
                    cpy2:center[1]+10
     			}
     		});

     		this.rect.attr({
     			shape:{
     				y:(box.height-textBox.height)/2
     			}
     		});
     		
     	}else if(this.type=='bottom'){
        var textBox= this.rect.getBoundingRect();
        var from = [0,2];
        var center=[box.width/2,10];
        var to=[box.width,2];
        this.bezierCurve1.attr({
          shape:{
            x1:from[0],
            y1:from[1],
            cpx1:from[0]+10,
            cpy1:from[1]+10,
            x2:center[0],
            y2:center[1],
            cpx2:center[0]-10,
            cpy2:center[1]-10
          }
        });
        this.bezierCurve2.attr({
          shape:{
            x1:to[0],
            y1:to[1],
            x2:center[0],
            y2:center[1],
            cpx1:to[0]-10,
            cpy1:to[1]+10,
            cpx2:center[0]+10,
            cpy2:center[1]-10
          }
        });

        this.rect.attr({
          shape:{
            x:(box.width-textBox.width)/2,
            y:12
          }
        });

     	}else if(this.type=='top'){
          var textBox= this.rect.getBoundingRect();
          var from = [0,20+textBox.height];
          var center=[box.width/2,textBox.height+12];
          var to=[box.width,20+textBox.height];
          this.bezierCurve1.attr({
            shape:{
              x1:from[0],
              y1:from[1],
              cpx1:from[0]+10,
              cpy1:from[1]-10,
              x2:center[0],
              y2:center[1],
              cpx2:center[0]-10,
              cpy2:center[1]+10
            }
          });
          this.bezierCurve2.attr({
            shape:{
              x1:to[0],
              y1:to[1],
              x2:center[0],
              y2:center[1],
              cpx1:to[0]-10,
              cpy1:to[1]-10,
              cpx2:center[0]+10,
              cpy2:center[1]+10
            }
          });

          this.rect.attr({
            shape:{
              x:(box.width-textBox.width)/2,
              y:12
            }
          });
     	}
     }

     setPosition(x,y){
     	if(x){
          this.position.x=x;
          var y1=this.position.y;
          this.g.attr({
        	 position:[x,y1]
          });
     	}
     	if(y){
           this.position.y=y;
           var x=this.position.x;
           this.g.attr({
        	  position:[x,y]
           });
     	}
     }
     setText(text){
     	this.induceText=text;
     	this.text.attr({
     		style:{
     			text:text
     		}
     	});
     	this.rect.attr({
            style:{
            	text:text
            }
     	});
     	this.update();
     }
     
     getText(){
     	return this.induceText;
     }

     getPosition(){
     	return {
     		x:this.g.position[0],
     		y:this.g.position[1]
     	}
     }

     update(){
        this.ajustType();
     	  var textBox= this.text.getBoundingRect();
     	  var me=this;
     	  this.create();
     	  var nodeBox=minderUtil.getNodeBox(this.node);
          var nodeList=this.node.getNodeList();
          var induce=[];

          nodeList.forEach(function(node){
          	   if(node.induce&&node.induce.visible&&node.induce!=me){
                   induce.push(node.induce);
          	   }
          });

          induce.sort(function(a,b){
             return b.node.getLevel()-a.node.getLevel();
          });
        
          if(induce.length){
               var len=induce.length-1;
               var box=this.getInduceBox(induce);
               if(this.type=='right'){
                  if(nodeBox.x1>box.x1){
                     this.setPosition(nodeBox.x1+2);
              	  }else{
               	     this.setPosition(box.x1+2);
               	  }
               }else if(this.type=='left'){
                  var induceBox=this.getBoundingRect();
                  if(nodeBox.x0<box.x0){
                        this.setPosition(nodeBox.x0-induceBox.width-6,nodeBox.y0);
                  }else{
                        this.setPosition(box.x0-induceBox.width-6,nodeBox.y0);
                  }
               }else if(this.type=='bottom'){
                  if(nodeBox.y1>box.y1){
                     this.setPosition(nodeBox.x0,nodeBox.y1+4);
                  }else{
                     this.setPosition(nodeBox.x0,box.y1+4);
                  }
               }else if(this.type=='top'){
                  var induceBox=this.getBoundingRect();
                  if(nodeBox.y0<box.y0){
                     this.setPosition(nodeBox.x0,nodeBox.y0-6-induceBox.height);
                  }else{
                     this.setPosition(nodeBox.x0,box.y0-6-induceBox.height);
                  }
               }
          }else{
          	if(this.type=='right'){
                 this.setPosition(nodeBox.x1+2);
          	}else if(this.type=='left'){
          		 var induceBox=this.getBoundingRect();
          		 this.setPosition(nodeBox.x0-12-induceBox.width,nodeBox.y0);
          	}else if(this.type=='bottom'){
               this.setPosition(nodeBox.x0,nodeBox.y1+4);
            }else if(this.type=='top'){
              var induceBox=this.getBoundingRect();
              this.setPosition(nodeBox.x0,nodeBox.y0-8-induceBox.height);
            }
          }

     }
     ajustType(){
         var direct=this.node.direct;
         var root=this.node.getMinder().getRoot();
         var rootPos=root.getPosition();
         if(['right','left'].indexOf(direct)>-1){
              var pos=this.node.getPosition();
                    if(rootPos.x<pos.x){
                        this.type='right';
                    }else{
                         this.type='left';
                    }
          }else if(['top','down'].indexOf(direct)>-1){
                    var pos=this.node.getPosition();
                    if(rootPos.y>pos.y){
                        this.type='top'
                    }else{
                         this.type='bottom'
                    }
          }else{
                    this.type='right';
          }
     }

     getInduceBox(induce){
     	var x0=0,y0=0,x1=0,y1=0;
     	induce.forEach(function(ind,index){
             var pos=ind.getPosition();
             var box=ind.getBoundingRect();
             if(index==0){
                  x0=pos.x;
                  y0=pos.y;
                  x1=pos.x+box.width;
                  y1=pos.y+box.height;
             }else{
               	if(pos.x<x0){
                     x0=pos.x;
               	}
               	if(pos.y<y0){
                     y0=pos.y;
               	}
               	if(pos.x+box.width>x1){
                     x1=pos.x+box.width;
               	}
               	if(pos.y+box.height>y1){
                     y1=pos.y+box.height;
               	}
             }
     	});

        return {
        	x0:x0,
        	y0:y0,
        	x1:x1,
        	y1:y1,
        	width:x1-x0,
        	height:y1-y0
        };
     }

     getBoundingRect(){
     	return this.g.getBoundingRect()
     }

     show(){
     	this.visible=true;
     	this.g.show();
     }

     hide(){
     	this.visible=false;
     	this.g.hide();
     }
     refresh(){
         this.update();
     }

     initEvent(){
     	var me=this;
     	var minder=this.node.getMinder();
        var fill=null;
     	this.rect.on('dblclick',function(){
            minder.__zr.trigger('editInduce',{induce:me});
     	}).on('mouseover',function(){
            fill=this.style.fill;
     		this.setStyle('fill','rgb(247,186,134)');
     		me.selected=true;
     	}).on('mouseout',function(){
     		this.setStyle('fill',fill);
     		me.selected=false;
     	}).on('click',function(e){
          me.selected=true;
          e.induce=me;
          minder.__zr.trigger('touchInduce',e);
      });
     }

     getData(){
     	return {
     		node:this.node.getId(),
     		induceText:this.induceText,
        type:this.type
     	}
     }
     getBoundingRect(){
      return this.g.getBoundingRect();
     }
}

	